import { message, Modal } from "ant-design-vue";
import { defineComponent, onMounted, reactive, ref } from "vue";
import ChordSet from "./ChordSet/ChordSet";
import styles from "./ChordsSign.module.less";
export default defineComponent({
  props: {
    state: {
      type: Object,
    },
    modify: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["setRemark", "removeRemark"],
  setup(props: any, { emit }) {
    const chordSetRef = ref(null as any);
    onMounted(() => {
      if (!props.modify) {
        let arr3d: any = [];
        props.state.value.split("\n").forEach((x: string, idx: number) => {
          if (x) {
            let arr1: any[] = [];
            x.split("").forEach((y: string) => {
              if (y === " ") {
                arr1.push({
                  word: "",
                })
              } else {
                arr1.push({
                  word: y,
                });
              }
            })
            arr3d.push({
              line: idx + 1,
              words: arr1,
            });
          }
        })
        props.state.arr = arr3d;
      }
    })
    const toUnshift = () => {
      if (props.state.actived[0] !== -1 && props.state.actived[1] !== -1) {
        Modal.confirm({
          title: "确认往前插入歌词?",
          okText: "确认",
          cancelText: "取消",
          onOk: () => {
            props.state.arr[props.state.actived[0]].words.splice(props.state.actived[1], 0, {
              word: "",
            });
          }
        })
      }
    }
    const toInsert = () => {
      if (props.state.actived[0] !== -1 && props.state.actived[1] !== -1) {
        Modal.confirm({
          title: "确认往后插入歌词?",
          okText: "确认",
          cancelText: "取消",
          onOk: () => {
            props.state.arr[props.state.actived[0]].words.splice(props.state.actived[1] + 1, 0, {
              word: "",
            });
          }
        })
      }
    }
    const toDelete = () => {
      if (props.state.actived[0] !== -1 && props.state.actived[1] !== -1) {
        Modal.confirm({
          title: "确认删除文字?",
          okText: "确认",
          cancelText: "取消",
          onOk: () => {
            props.state.arr[props.state.actived[0]].words.splice(props.state.actived[1], 1);
          }
        })
      }
    }
    const toSetChord = () => {
      chordSetRef.value.open({
        chord_tone: props.state.chord_tone,
        chooseOri: props.state.arr[props.state.actived[0]].words[props.state.actived[1]].chooseOri,
        beat: props.state.arr[props.state.actived[0]].words[props.state.actived[1]].beat,
      });
    }
    const doChordSet = (val) => {
      const name = props.state.arr[props.state.actived[0]].words[props.state.actived[1]].choose || "";
      if (!val.choose.enter) {
        emit("setRemark", val);
      }
      props.state.arr[props.state.actived[0]].words[props.state.actived[1]].chooseOri = val.chooseOri;
      props.state.arr[props.state.actived[0]].words[props.state.actived[1]].chooseScore = val.chooseScore;
      props.state.arr[props.state.actived[0]].words[props.state.actived[1]].choose = val.choose.name;
      props.state.arr[props.state.actived[0]].words[props.state.actived[1]].chooseEnter = val.choose.enter;
      props.state.arr[props.state.actived[0]].words[props.state.actived[1]].beat = val.beat;
      // 备注里有该原和弦提醒,修改完后曲谱内无该原和弦，此时清除该原和弦备注
      if (props.state.remarks.map(x => x.name).includes(name) && props.state.arr.every(x => x.words?.every(y => y.choose !== name))) {
        emit("removeRemark", name);
      }
    }
    const toInitChord = () => {
      Modal.confirm({
        title: "确认清除和弦?",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          const name = props.state.arr[props.state.actived[0]].words[props.state.actived[1]].choose;
          delete props.state.arr[props.state.actived[0]].words[props.state.actived[1]].choose;
          delete props.state.arr[props.state.actived[0]].words[props.state.actived[1]].beat;
          delete props.state.arr[props.state.actived[0]].words[props.state.actived[1]].chooseEnter;
          delete props.state.arr[props.state.actived[0]].words[props.state.actived[1]].chooseOri;
          delete props.state.arr[props.state.actived[0]].words[props.state.actived[1]].chooseScore;
          // 备注里有该原和弦提醒,修改完后曲谱内无该原和弦，此时清除该原和弦备注
          if (props.state.remarks.map(x => x.name).includes(name) && props.state.arr.every(x => x.words?.every(y => y.choose !== name))) {
            emit("removeRemark", name);
          }
        }
      })
    }
    const temp = reactive({
      word: null as null | string,
      wordLine: null as null | string,
    })
    // 修改歌词
    const toEditWord = (word) => {
      temp.word = word;
      Modal.confirm({
        title: "修改歌词",
        content: () => <div class={styles.signRow}>
          <input placeholder="请输入歌词" v-model={temp.word} />
        </div>,
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          props.state.arr[props.state.actived[0]].words[props.state.actived[1]].word = temp.word || '';
          temp.word = null;
        },
        onCancel: () => {
          temp.word = null;
        }
      })
    }
    // 前插歌词行
    const toUnshiftLine = () => {
      temp.wordLine = null;
      Modal.confirm({
        title: "前插歌词行",
        content: () => <div class={styles.signRow}>
          <input maxlength={1} placeholder="请输入歌词" v-model={temp.wordLine} />
        </div>,
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          if (!temp.wordLine) {
            message.error("未输入歌词!");
            return;
          }
          let arr: any[] = [];
          temp.wordLine?.split("").forEach((x: string) => {
            if (x === " ") {
              arr.push({
                word: "",
              })
            } else {
              arr.push({
                word: x,
              });
            }
          })
          props.state.arr.splice(props.state.actived[0], 0, {
            words: arr,
          })
        }
      })
    }
    // 后插歌词行
    const toInsertLine = () => {
      temp.wordLine = null;
      Modal.confirm({
        title: "后插歌词行",
        content: () => <div class={styles.signRow}>
          <input maxlength={1} placeholder="请输入歌词" v-model={temp.wordLine} />
        </div>,
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          if (!temp.wordLine) {
            message.error("未输入歌词!");
            return;
          }
          let arr: any[] = [];
          temp.wordLine?.split("").forEach((x: string) => {
            if (x === " ") {
              arr.push({
                word: "",
              })
            } else {
              arr.push({
                word: x,
              });
            }
          })
          props.state.arr.splice(props.state.actived[0] + 1, 0, {
            words: arr,
          })
        }
      })
    }
    return () => (
      <>
        <div class={styles.flows}>
          <div class={styles.warnings}>
            <a-space direction="vertical" style="width: 100%">
              {
                props?.state?.remarks?.map?.((item: any) => (
                  <a-alert message={item.text} type="warning" />
                ))
              }
            </a-space>
          </div>
          {
            props.modify && <>
              <div class={styles.step}>
                <div class={styles['step-flag']}>修改节拍</div>
              </div>
              <div class={styles['step-content']}>
                <a-input-number style="width:300px;" placeholder="请填写曲谱节拍" v-model:value={props.state.beat} />
              </div>
              <div class={styles.step}>
                <div class={styles['step-flag']}>修改速度</div>
              </div>
              <div class={styles['step-content']}>
                <a-input-number style="width:300px;" placeholder="请填写曲谱速度" v-model:value={props.state.temp} />
              </div>
              <div class={styles.step}>
                <div class={styles['step-flag']}>修改曲谱调号</div>
              </div>
              <div class={styles['step-content']}>
                <a-input style="width:300px;" placeholder="请填写曲谱调号" v-model:value={props.state.score_tone} />
              </div>
              <div class={styles.step}>
                <div class={styles['step-flag']}>修改和弦调号</div>
              </div>
              <div class={styles['step-content']}>
                <a-input style="width:300px;" placeholder="请填写和弦调号" v-model:value={props.state.chord_tone} />
              </div>
            </>
          }
          <div class={styles.step}>
            <div class={styles['step-flag']}>打和弦</div>
          </div>
          <div class={styles['step-content']}>
            <div class={styles.pages}>
              {
                props.state.arr.map((itemX: any, indexX) => (
                  <div class={styles.line}>
                    {
                      itemX.words.map((itemY, indexY) => (
                        <a-dropdown trigger="contextmenu" placement="bottomRight" v-slots={{
                          overlay: () => <>
                            <a-menu>
                              <a-menu-item key="1" onClick={() => { toSetChord() }}>设置和弦</a-menu-item>
                              <a-menu-item key="2" onClick={() => { toInitChord() }}>清除和弦</a-menu-item>
                              <a-menu-item key="3" onClick={() => { toEditWord(itemY.word) }}>修改歌词</a-menu-item>
                              <a-menu-item key="4" onClick={() => { toUnshift() }}>前插空格</a-menu-item>
                              <a-menu-item key="5" onClick={() => { toInsert() }}>后插空格</a-menu-item>
                              <a-menu-item key="6" onClick={() => { toDelete() }}>删除</a-menu-item>
                              {
                                (indexY === 0) && <a-menu-item key="7" onClick={() => { toUnshiftLine() }}>前插歌词行</a-menu-item>
                              }
                              {
                                (indexY === itemX.words.length - 1) && <a-menu-item key="8" onClick={() => { toInsertLine() }}>后插歌词行</a-menu-item>
                              }
                            </a-menu>
                          </>
                        }}>
                          <div class={
                            [
                              styles.word,
                              itemY.word === '' && styles.space,
                              (props.state.actived[0] === indexX && props.state.actived[1] === indexY) && styles.actived,
                              (itemY.choose || itemY.beat) && styles.hasChord,
                              ((props.state.actived[0] === indexX && props.state.actived[1] === indexY) && itemY.word === '') && styles.noTextActived
                            ]
                          } onClick={() => { props.state.actived[0] = indexX; props.state.actived[1] = indexY; }} onContextmenu={() => { props.state.actived[0] = indexX; props.state.actived[1] = indexY; }} onDblclick={() => { props.state.actived[0] = indexX; props.state.actived[1] = indexY; toSetChord() }}>
                            {itemY.word}
                            {
                              itemY.choose && (
                                <div class={styles.chord}>{itemY.chooseOri} {itemY.beat}</div>
                              )
                            }
                          </div>
                        </a-dropdown>
                      ))
                    }
                  </div>
                ))
              }
            </div>
          </div>
        </div>
        <ChordSet state={props.state} ref={chordSetRef} onConfirm={(e) => { doChordSet(e) }} />
      </>
    )
  }
})